<template>
    <div class='workspace-index'>
        <!-- <div class="workspace-header">应用工具</div> -->
        <div class="app-list">
            <div class="title">应用系统</div>
            <ul>
                <li v-for="(item ,index) in appList" :key="index" @click="checkAppAcount(item)">
                        <div class="name">{{item.name}}</div>
                        <div class="btn">进入系统</div>
                </li>
            </ul>
            <!-- <div class="app-item app-item-add">
                <Plus class="item-add-icon" icon="Plus"/>
                <div class="item-title">添加应用</div>
            </div> -->
            <!-- <div v-for="item in appList" :key="item.id" class="app-item" @click="checkAppAcount(item)">
                <img :src="item.img" class="item-icon"/>
                <div class="item-title">{{ item.name }}</div>
            </div> -->
        </div>
        <AccountAuth ref="accountRef" @agreenAuth="agreenAuth"/>
    </div>
</template>
<script lang="ts" setup>
import appBankingImg from '@/assets/images/workspace/app-banking.png';
// import appCheckImg from '@/assets/images/workspace/app-check.png';
import appEvaluationImg from '@/assets/images/workspace/app-evaluation.png';
import { ref } from 'vue';
import { useStore } from 'vuex';
import { usersEdit } from "../../ajax/index";
import AccountAuth from './accountAuth.vue';
const store = useStore();
const userInfo:any = computed(() => store.state.user.userInfo);
const appList = ref([]) as any
const accountRef = ref()
let accountFormVisible = ref(false)
let appInfo = ref({})
// const loginUrl = process.env.BASE_URL_LP
// const loginUrlLocal = import.meta.env.VITE_LP_URL;
// const lpUrl = loginUrl?loginUrl:loginUrlLocal
// console.log(`loginUrl `+loginUrl)
// console.log(`loginUrlLocal `+loginUrlLocal)
//authorityApp 授权登录应用(1:绿评 2:绿金)
appList.value = [
    // {
    //     id: 1,
    //     name: "绿评核查工具",
    //     img: appCheckImg,
    //     link: "http://www.baidu.com",
    //     isBind: false
    // }, //暂时不显示
    // {
    //     id: 1,
    //     name: "绿色产品评价",
    //     img: appEvaluationImg,
    //     // link: "http://101.200.62.30/",
    //     link: lpUrl,
    //     isBind: false
    // },
    // {
    //     id: 2,
    //     name: "绿色金融服务",
    //     img: appBankingImg,
    //     link: "https://fs.hq-gsc.com/home",
    //     isBind: false
    // }
     {
        id: 1,
        name: "周口市能碳管理平台",
        // img: appEvaluationImg,
        // link: "http://101.200.62.30/",
        link: `http://carbon.c9fb8739bee81407993186d2c40be48a2.cn-shanghai.alicontainer.com/overview`,
        isBind: false
    },
     {
        id: 2,
        name: "周口市双碳元数据管理平台",
        // img: appEvaluationImg,
        // link: "http://101.200.62.30/",
        link: `http://121.36.96.52:29000/dcc-carborn/sys/sso/carbon/validateLogin`,
        isBind: false
    },
     {
        id: 3,
        name: "周口市智慧核碳系统",
        // img: appEvaluationImg,
        // link: "http://101.200.62.30/",
        link: `http://113.200.212.29:33313/#/home`,
        isBind: false
    },
     {
        id: 4,
        name: "周口市智慧观碳/感碳系统",
        // img: appEvaluationImg,
        // link: "http://101.200.62.30/",
        link: `http://113.200.212.29:33312/#/home`,
        isBind: false
    },
]

// 校验绑定状态，执行下一步操作
const checkAppAcount = (info: any) => {
    if(userInfo.value.authorityApp&&userInfo.value.authorityApp.indexOf(info.id)>-1){
        const telephone =userInfo.value.loginName
        window.open(info.link+`?telephone=${telephone}`, "_blank")
    }else{
        accountFormVisible.value = true
        appInfo.value = info
        accountRef.value.init(info)
    }
}
const agreenAuth = (appInfo:any)=>{
    const id = appInfo.id
    // const authorityApp = userInfo.value.authorityApp&&userInfo.value.authorityApp!==id?userInfo.value.authorityApp+id:id
    // usersEdit({...userInfo.value,authorityApp:authorityApp}).then(res=>{
    //     if(res.succ){
    //         accountRef.value.handleClose()
    //         if(userInfo.value.loginName){
    //             const telephone =userInfo.value.loginName
    //             window.open(appInfo.link+`?telephone=${telephone}`, "_blank")
    //         }
    //     }
    // })
    accountRef.value.handleClose()
    const telephone =userInfo.value.loginName
    window.open(appInfo.link+`?telephone=${telephone}`, "_blank")
}

</script>
<style lang='scss' scoped>
$textColor: #262626;
.workspace-index{
    margin-left: 32px;
    .workspace-header {
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
        color: $textColor;
    }
    .app-list{
        display: flex;
        flex-wrap: wrap;
        .app-item {
            margin: 25px 25px 0 0px;
            cursor: pointer;
            display: flex;
            align-items: center;
            width: 184px;
            height: 60px;
            background: #FFFFFF;
            box-shadow: 0px 0px 16px 0px rgba(103,106,108,0.2);
            border-radius: 2px;
            .item-add-icon{
                color: #088D9E;
                width: 20px;
                margin-left: 47px;
            }
            .item-icon {
                width: 32px;
                height: 32px;
                margin-left: 15px;
                border-radius: 3px;
            }
            .item-title {
                padding-left: 8px;
                font-size: 13px;
                font-weight: 400;
                width: 115px;
                line-height: 20px;
                color: $textColor;
            }
        }
    }
    .app-list{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        .title{
            font-size: 20px;
            text-align: center;
            text-align: center;
            margin: 100px auto 50px;
        }
        ul{
            width: 100%;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            >li{
                width: 340px;
                height: 190px;
                margin-bottom: 30px;
                margin-left: 30px;
                padding: 30px;
                >.name{
                    line-height: 50px;
                    font-size: 18px;
                    color: #fff;
                    font-weight: 600;
                }
                >.btn{
                    margin-top: 20px;
                    width: 100px;
                    height: 40px;
                    line-height: 40px;
                    border-radius: 20px;
                    cursor: pointer;
                    text-align: center;
                    font-size: 14px;
                    color: #fff;
                    background-color: rgba(255,255,255,0.3);
                    &:hover{
                        background-color: rgba(255,255,255,0.7);
                    }
                }
                &:nth-child(n+1){
                    background: url(../../assets/images/space/1.png) center no-repeat;
                    background-size: 100% 100%;
                }
                &:nth-child(2n+1){
                    margin-right: 0;
                    background: url(../../assets/images/space/2.png) center no-repeat;
                    background-size: 100% 100%;
                }
                &:nth-child(3n+1){
                    background: url(../../assets/images/space/3.png) center no-repeat;
                    background-size: 100% 100%;
                }
                &:nth-child(4n+1){
                    background:url(../../assets/images/space/4.png) center no-repeat;
                    background-size: 100% 100%;
                }
            }
        }
    }
}
</style>
